<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const props = defineProps(['colors', 'tableData'])

onMounted(() => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: props.tableData.map(item => item.name)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: props.tableData.map(item => item.value),
          type: 'bar',
          barWidth: 40,
          itemStyle: {
            normal: {
              label: {
                show: false,
                position: 'top',
                textStyle: {
                  color: '#000000',
                },
              },
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: props.colors[1],
                  },
                  {
                    offset: 1,
                    color: props.colors[0],
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          }

        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
